<style scoped lang="scss">
.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    margin-bottom: 5px; // 10px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      margin-left: 20px;
    }
    .header-center {
      margin-right: 20px;
      p {
        font-size: 13px;
      }
    }
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .table {
      width: 100%;
      height: 135px; // 270px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      .table-one {
        width: 90%;
        height: 45px; // 90px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .one-left {
          p {
            font-size: 13px; // 26px * 0.5
            color: #717171;
          }
        }
        .one-center {
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          input {
            width: 100%;
            height: 30px; // 60px * 0.5
            padding-left: 10px; // 20px * 0.5
            border: none;
          }
          input::placeholder {
            padding-left: 200px; // 400px * 0.5
            color: #ccc;
          }
        }
      }
      .table-two {
        width: 90%;
        height: 45px; // 90px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .two-left {
          p {
            font-size: 13px; // 26px * 0.5
            color: #717171;
          }
        }
        .two-center {
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          input {
            width: 100%;
            height: 30px; // 60px * 0.5
            padding-left: 10px; // 20px * 0.5
            border: none;
          }
          input::placeholder {
            padding-left: 185px; // 370px * 0.5
            color: #ccc;
          }
        }
      }
      .table-three {
        width: 90%;
        height: 45px; // 90px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .three-left {
          p {
            font-size: 13px;
            color: #717171;
          }
        }
        .three-center {
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          input {
            width: 100%;
            height: 30px; // 60px * 0.5
            padding-left: 10px; // 20px * 0.5
            border: none;
          }
          input::placeholder {
            padding-left: 160px; // 320px * 0.5
            color: #ccc;
          }
        }
      }
    }
    .button {
      width: 100%;
      height: 50px; // 100px * 0.5
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 80%;
        height: 30px; // 60px * 0.5
        color: #fff;
        border: none;
        border-radius: 4px; // 8px * 0.5
        background-color: #3087ea;
      }
    }
  }
  footer {
    width: 100%;
    height: 40px; // 80px * 0.5
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <van-icon style="font-size: 30px" name="arrow-left" @click="onClickLeft" />
      </div>
      <div class="header-center">
        <p>设置密码</p>
      </div>
      <div class="header-right"></div>
    </header>
    <main>
      <div class="table">
        <div class="table-one">
          <div class="one-left">
            <p>我的密码</p>
          </div>
          <div class="one-center">
            <input v-model="from.oldPwd" type="text" placeholder="请输入原密码" />
          </div>
        </div>
        <div class="table-two">
          <div class="two-left">
            <p>设置新密码</p>
          </div>
          <div class="two-center">
            <input v-model="from.newPwd" type="text" placeholder="请输入新密码" />
          </div>
        </div>
        <div class="table-three">
          <div class="three-left">
            <p>确认新密码</p>
          </div>
          <div class="three-center">
            <input v-model="from.changePwd" type="text" placeholder="请再次输入新密码" />
          </div>
        </div>
      </div>
      <div class="button">
        <button @click="onRest">确定</button>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { ElMessage } from 'element-plus';
import { request } from '../../axios/request';
import JSEncrypt from 'jsencrypt';
import { ref } from 'vue';
// 数据绑定
const from = ref({
  oldPwd: '',
  newPwd: '',
  changePwd: ''
})
// 拿取userId，sessionId
const userId = JSON.parse(localStorage.getItem('userId') || '')
const sessionId = JSON.parse(localStorage.getItem('sessionId') || '')
// 修改密码
const onRest = async() => {
  console.log(from.value);
  const crypt = new JSEncrypt()
  const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const pwdOne = ref(crypt.encrypt(from.value.oldPwd))
  const pwdTwo = ref(crypt.encrypt(from.value.newPwd))
  console.log(pwdTwo.value);
  console.log(pwdOne.value);

  if(from.value.newPwd === from.value.changePwd) {
    await request.put('/health/user/verify/v1/updateUserPwd',{
      oldPwd: pwdOne.value,
      newPwd: pwdTwo.value
    },{
      headers: {
        userId: userId.value as number,
        sessionId: sessionId.value as string,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(res => {
      console.log(res);
      let { message, status } = res.data
      if(status == '0000'){
        ElMessage.success(message)
        router.back()
      }else{
        ElMessage.error(message)
      }
    })
  }else{
    ElMessage.error('两次密码不一致')
  }


  // router.push('/setting')
}

const onClickLeft = () => history.back()
</script>
